<template>
  <el-dialog
      title="创建分组"
      :visible.sync="visible"
      width="30%"
      :before-close="onClose">
      <el-form ref="form" label-position="left" :model="form" label-width="80px" size="small">
        <el-form-item label="分组名称" prop="group_name">
          <el-input v-model="form.group_name" placeholder="请输入分组名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="onSubmit('form')">保存</el-button>
      </span>
    </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      form: {
        group_name: ''
      },
      rules: {
        group_name: [
          { required: true, message: '请输入分组名称', trigger: 'blur' }
        ],

      }
    }
  },
  props: ['visible'],
  methods: {
    onSubmit(formName) {
      //提交的代码
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // reqAddServe(form).then(res => {
          //   this.$modal.msgSuccess('操作成功！');
          //   this.$emit('handleQuery')//更新列表
          //   this.onClose()//关闭窗口
          // })

        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    onClose() {
      this.$emit('onClose');
    }
  },
}
</script>
